<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>订单批量上传 - Powered by __CAOZHA-SYS-NAME__ __CAOZHA-SYS-VERSION__</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__CAOZHA-LAYUIMINI__/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__CAOZHA-LAYUIMINI__/css/public.css" media="all">
    <script src="__CAOZHA-STATIC__/js/jquery-3.4.1.min.js"></script>
    <script src="__CAOZHA-LAYUIMINI__/lib/layui/layui.js" charset="utf-8"></script>
    <script src="__CAOZHA-STATIC__/js/all.js"></script>
    <link rel="stylesheet" href="__CAOZHA-STATIC__/css/style.css" media="all">
    <style type="text/css">
        body{padding:5px 40px;}
        .cz-upload{
            width: 100%;
        }
        .cz-upload button{
            margin: 15px auto auto 80px;
        }
        .cz-fieldset{margin-top: 50px;}
        .cz-fieldset .layui-field-box{line-height: 180%;}
        .cz-progress{
            width: 258px;margin-top: 10px;display: none;
        }
    </style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>批量上传订单</legend>
</fieldset>

<div class="layui-upload-drag" id="order_upload">
    <i class="layui-icon"></i>
    <p>点击上传，或将文件拖拽到此处</p>
</div>

<div class="layui-progress layui-progress-big cz-progress" lay-showPercent="yes" lay-filter="cz-progress">
    <div class="layui-progress-bar" lay-percent="0%"></div>
</div>

<div class="cz-upload">
<button type="button" class="layui-btn layui-btn-normal" id="upload_btn">开始上传</button>
</div>

<fieldset class="layui-elem-field cz-fieldset">
    <legend>上传说明</legend>
    <div class="layui-field-box">
        1、支持的上传文件格式：.xls &nbsp;.xlsx。
        <br>
        2、上传文件限制：最大允许{$order_upload_limit}M，Excel表格的内容必须放在第一张表（页），表格的行数建议20000行以内为佳，超出则容易导致内存溢出等错误。
        <br>
        3、上传文件的格式参考：<a href="__CAOZHA-STATIC__/files/demo.xls">上传格式demo.xls（点击下载）</a>。
    </div>
</fieldset>

<script>

    layui.use(['element', 'upload'], function () {
        var element = layui.element,
            upload = layui.upload;

        layer_skin(layer);

        //拖拽上传
        var cz_upload=upload.render({
            elem: '#order_upload'
            ,url: '{:url(\'admin/order/upload_save\')}' //上传接口
            ,progress: function(n, elem){
                var percent = n + '%' //获取进度百分比
                element.progress('cz-progress', percent); //可配合 layui 进度条元素使用
            }
            ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.load(); //上传loading
                element.progress('cz-progress', '0%');
                $(".cz-progress").show();
            }
            ,done: function(res, index, upload){
                console.log(res)
                if(res.code==1){
                    //layer.msg('上传完成，系统正在导入订单数据，请稍候……', {icon: 1,time: 3000});
                    caozha_success=layer.alert('上传完成，系统正在导入订单数据，<br>请不要刷新页面……（按确定后继续导入）', {
                        title:'提示',
                        btn: ['确定'],
                        closeBtn: 0,
                        btnAlign: 'c',
                        icon: 6,
                    }, function(){
                        layer.close(caozha_success);
                        });
                    $(".cz-progress").hide();
                    $.ajax({
                        type: "post",
                        url: '{:url(\'admin/order/import\')}',
                        data: {filename: res.filename},
                        dataType: "json",
                        async: false,
                        success: function (import_res) {
                            if (import_res.code == 1) {
                                caozha_success=layer.alert(import_res.msg, {
                                    title:'成功提示',
                                    btn: ['确定'],
                                    closeBtn: 0,
                                    btnAlign: 'c',
                                    icon: 6,
                                }, function(){
                                    layer.close(caozha_success);
                                    window.location.reload();
                                });

                            } else {

                                var caozha_error=layer.alert(import_res.msg, {
                                    title:'错误提示',
                                    btn: ['确定'],
                                    closeBtn: 0,
                                    btnAlign: 'c',
                                    icon: 5,
                                }, function(){
                                    layer.close(caozha_error);
                                    window.location.reload();
                                });

                            }
                        },
                        complete: function(XMLHttpRequest, textStatus) {
                            layer.closeAll('loading'); //关闭loading
                        },
                        error: function(){

                            var caozha_error=layer.alert("遇到了错误，请按确定后重新尝试。", {
                                title:'错误提示',
                                btn: ['确定'],
                                closeBtn: 0,
                                btnAlign: 'c',
                                icon: 5,
                            }, function(){
                                layer.close(caozha_error);
                                window.location.reload();
                            });

                        }
                    });

                }else {
                    layer.closeAll('loading'); //关闭loading
                    $(".cz-progress").hide();
                    var caozha_error=layer.alert(res.msg, {
                        title:'错误提示',
                        btn: ['确定'],
                        closeBtn: 0,
                        btnAlign: 'c',
                        icon: 5,
                    }, function(){
                        layer.close(caozha_error);
                    });
                }
            }
            ,error: function(index, upload){
                layer.closeAll('loading'); //关闭loading
                $(".cz-progress").hide();
                var caozha_error=layer.alert('上传失败', {
                     title:'错误提示',
                     btn: ['确定'],
                     closeBtn: 0,
                     btnAlign: 'c',
                     icon: 5,
                 }, function(){
                    layer.close(caozha_error);
                     });
            }
            ,accept: 'file' //允许上传的文件类型
            ,size: 1024*{$order_upload_limit} //设置文件最大可允许上传的大小，单位 KB。不支持ie8/9
            ,exts:'xls|xlsx' //允许上传的文件后缀
            ,auto:false //是否选完文件后自动上传
            ,bindAction: '#upload_btn'
            ,field:'order_file' //设定文件域的字段名
        });


    });
</script>

</body>
</html>